<template>
  <BottomDrawer
    :visible="addVisible"
    class="supply-form"
    :title="dataType.dataType === 0 ? '添加供应商' : ' 编辑供应商'"
    :width="450"
    @close="addVisible = false"
  >
    <div style="padding: 10px;">
      
          <PageForm
            v-if="addVisible"
            ref="pageForm"
            :labelPosition="'left'"
            :list="list"
            :form-data="formData"
            :rules="rules"
          >
           
          </PageForm>
               
            
    </div>

    <template #footer>
      <el-button @click="handleSubmit" type="primary">确 定</el-button>
      <el-button @click="addVisible = false">取 消</el-button>
    </template>
  </BottomDrawer>
</template>

<script setup lang="ts">
import type { RoleForm, RoleQuery } from '@/types/role';
import type { FormRules, ElTree } from 'element-plus';
import type { SupplyInfo, SupplyTable ,SupplyForm } from '@/types/supply';
import {addStorage,updateSupply} from '@/api/supply/index'


const rules = reactive<FormRules<SupplyInfo>>({
    supplyName: [
        { required: true, message: '请输入供应商名称', trigger: 'blur' },
        {
          min: 1,
          max: 30,
          message: '30个字符内',
          trigger: 'blur',
        },
    ],
    managerName: [
        { required: true, message: '请输入联系人姓名', trigger: 'blur' },
        {
          min: 1,
          max: 10,
          message: '10个字符内',
          trigger: 'blur',
        },
    ],
    managerPhone: [
        { required: true, message: '请输入联系人电话', trigger: 'blur' },
        {
          min: 1,
          max: 11,
          message: '11 个字符内',
          trigger: 'blur',
        },
    ],
});
 
// 获取序列列表
const emit = defineEmits(['closeDrawer']);
const pageForm = ref();
const dataType = defineProps<{ dataType: Number }>();
 
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

const handleAreaChange = (value: any) => {
  formData.value.province = value.province
  formData.value.city = value.city
  formData.value.county = value.district
};
// const listdept = ref([])
defineExpose<{
  open: () => void;
  open1: (menu: SupplyInfo) => void;
}>({
  open: () => {
    formData.value ={
      supplyName:'',
      managerName:'',
      managerPhone:'',
      city:'',
      county:'',
      province:'',
      address:'',
      addressIds:[]
    }
    addVisible.value = true;
    // treeData.value = 
  },
  open1: (menu: SupplyInfo) => {
    formData.value.supplyId = menu.supplyId
    formData.value.supplyName = menu.supplyName
    formData.value.managerName = menu.managerName
    formData.value.managerPhone = menu.managerPhone
    formData.value.city = menu.city
    formData.value.county = menu.county
    formData.value.address = menu.address
    formData.value.addressIds =[
      Number(menu.province),
      Number(menu.city),
      Number(menu.county),
    ]
    addVisible.value = true;
  },
});

const addVisible = ref(false);

const formData = ref<SupplyInfo>({
  supplyName:'',
  managerName:'',
  managerPhone:'',
  city:'',
  county:'',
  province:'',
  address:'',
  addressIds:{}
});
const list: any = computed(() => [
  {
    list: [
      {
        span: 24,
        label: '供应商',
        prop: 'supplyName',
        labelWidth:'80px',
        componentProps:{
            placeholder:'30个字以内',
            width:'320px'
        },
        component: 'input',
      },
        {
        span: 24,
        label: '联系人',
        labelWidth:'80px',
        componentProps:{
            width:'320px',
            placeholder:'请输入联系人姓名',
        },
        prop: 'managerName',
        component: 'input',
      },
      {
        span: 24,
        label: '联系电话',
        labelWidth:'80px',
        componentProps:{

            width:'320px',
          placeholder:'请输入联系人电话',
        },
        prop: 'managerPhone',
        component: 'input',
      },
      // {
      //   span: 24,
      //   labelWidth:'80px',
      //   multiple:false,
      //   checkbox:false,
      //   label: '联系地址',
      //   prop: 'addressIds',
      //   componentProps:{
      //     slotName:'dept'
      //   },
      //   component: 'slotName',
      // },
      {
        span: 24,
        label: '联系地址',
        labelWidth:'80px',
        prop: 'addressIds',
        component: 'cascader',
        cascaderProps: {
          value: 'code',
          label: 'name',
          children: 'children',
        },
        componentProps: {
          placeholder: '请选择省市县',
          width: '320px',
        },
        onChange: (value: string[]) => {
          //console.log('选择的地区代码:', value);
          formData.value.province = value[0]
          formData.value.city = value[1]
          formData.value.county = value[2]
        },
      },
      {
        span: 24,
        label: '',
         componentProps:{
            placeholder:'详细地址',
            width:'320px',

        },
        labelWidth:'80px',
        prop: 'address',
        component: 'input',
      },
    ],
  },
]);

const addChannelApi = async () => {
   let res = await addStorage(formData.value)
  if(res.code == '200'){
    ElMessage({
        type: 'success',
        message: res.msg,
        duration: 2000,

    });
  closeDrawer()

  }else{

  }
     
};
const editChannelApi = async () => {
  let res = await updateSupply(formData.value)
    if(res.code == '200'){
    ElMessage({
        type: 'success',
        message: res.msg,
        duration: 2000,

    });
  closeDrawer()

  }else{

  }

};
const handleSubmit = async () => {
  const ruleFormRef = pageForm.value?.ruleFormRef;
  await ruleFormRef.validate((valid: any, fields: any) => {
    if (valid) {
      if (dataType.dataType === 0) {
        addChannelApi();
      } else {
        editChannelApi();
      }
    } else {
      //console.log('error submit!', fields);
    }
  });
};
const closeDrawer = () => {
    addVisible.value = false
    emit('closeDrawer');
};
onMounted(() => {
});
</script>
<style>
  .supply-form .modal-footer{
    padding: 10px 0px;
  }
</style>
<style lang="scss" scoped>
.tree-box {
  border: 2px solid #e1e1e1;
  height: 300px;
  width: 451px;
  margin-top: 10px;
  overflow-y: auto;
}
</style>
